<template>
  <div class="login-box">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>学员成绩管理系统</span>
        </div>
      </template>

      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="账号登录" name="first">
          <el-form
            ref="ruleFormRef1"
            :model="ruleForm1"
            :rules="rules"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item label="帐号：" prop="userName">
              <el-input v-model="ruleForm1.userName" />
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input v-model="ruleForm1.password" type="password" />
            </el-form-item>
            <el-form-item class="login-btns">
              <el-button type="primary" @click="submitForm1(ruleFormRef1)"
                >登录</el-button
              >
              <el-button @click="resetForm1(ruleFormRef1)">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="手机登录" name="second"
          ><el-form
            ref="ruleFormRef2"
            :model="ruleForm2"
            :rules="rules"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="ruleForm2.phone" />
            </el-form-item>

            <div class="login-checking">
              <el-form-item label="验证码：" prop="checking">
                <el-input v-model="ruleForm2.checking" />
              </el-form-item>
              <el-button type="primary" class="checking">发送验证码</el-button>
            </div>
            <el-form-item class="login-btns">
              <el-button type="primary" @click="submitForm2(ruleFormRef2)"
                >登录</el-button
              >
              <el-button @click="resetForm2(ruleFormRef2)">重置</el-button>
            </el-form-item>
          </el-form></el-tab-pane
        >
      </el-tabs>
      <div class="login-boont">
        <p class="boont-logon" @click="logon">立即注册</p>
        <p class="boont-retrieve" @click="retrieve">找回密码</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { UserLoginAPI, PhoneLoginAPI} from "@/api/api.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { GoodStore } from "@/stores/goods.js"
const activeName = ref("first");
const ruleFormRef1 = ref();
const ruleFormRef2 = ref();
const router = useRouter();
let goodStore = GoodStore()

const handleClick = (tab, event) => {
  console.log(tab, event);
};

const ruleForm1 = reactive({
  userName: "",
  password: "",
});
const ruleForm2 = reactive({
  phone: "",
  checking: "",
});

const rules = reactive({
  userName: [
    {
      required: true,
      message: "请输入帐号",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号码",
      trigger: "blur",
    },
  ],
  checking: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
});
//账号登录
const submitForm1 = async () => {
  // console.log(111);
  const res = await UserLoginAPI({
    account: ruleForm1.userName,
    password: ruleForm1.password,
  });
  console.log(res, "res");
  console.log(res.token, "res");
  // var {token,result} = res
  if (res.code == 200) {
    ElMessage({
      showClose: true,
      message: res.msg,
      type: "success",
    });
    
    goodStore.setUserInfo(res) 
    router.replace("/home");
  }
};
const resetForm1 = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
const resetForm2 = (formE2) => {
  if (!formE2) return;
  formEl.resetFields();
};
// onMounted(() => {
  
// })
</script>

<style lang="scss" scoped>
.login-box {
  position: relative;
  height: 100%;
  background: url("@/assets/99.jpg") center;
  background-size: cover;
  .el-card {
    background-color: rgb(0, 0, 0, 0.2);
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 360px;
    width: 420px;
    border-radius: 20px;
    :deep(.el-card__header) {
      display: flex;
      justify-content: center;
      align-items: center;
      .card-header {
        font-size: 20px;
        span {
          font-weight: bold;
        }
      }
    }
    :deep(.el-card__body) {
      .el-form {
        .login-btns {
          .el-form-item__content {
            margin-left: 0 !important;
            justify-content: center;
          }
        }
      }
    }
  }
}
:deep(.el-tabs__nav) {
  width: 100%;
  display: flex;
  transform: translateX(100px);
  justify-content: space-around;

  .el-tabs__item {
    color: #fff;
  }
}
:deep(.el-form-item__label) {
  color: #fff;
}
.login-boont {
  display: flex;
  justify-content: space-between;
  .boont-logon {
    color: #e69d16;
  }
  .boont-retrieve {
    color: #99eb0d;
  }
}
.login-checking {
  display: flex;
  .checking {
    margin-left: 6px;
  }
}
</style>
